//分析研判
<template>
  <div class="FxEcharts">
    <div class="flexC AlignItemsC">
      <div class="flex ">
        <div class="flexC JustifyContentSA  flex2 category pggffx">
          <div class="flex JustifyContentSA AlignItemsC">
            <p class=" font_28 nav title">
              <span></span>
              老人护理需求分析
            </p>
            <ul class="flex font_s16 textC pgdj_ul cursor">
              <li class="tab_a " @click="curFun(1)" :class="{ cur: cur === 1 }">临床护理</li>
              <li class="tab_a" @click="curFun(2)" :class="{ cur: cur === 2 }">生活护理</li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="cur === 1" @click="clone.lchl = true"><chart class="chart" :options="orgOptions.echarts5" :auto-resize="true"></chart></div>
          <div class="flex JustifyContentSA" v-if="cur === 2" @click="clone.shhl = true"><chart class="chart" :options="orgOptions.echarts6" :auto-resize="true"></chart></div>
        </div>
        <div class="flexC JustifyContentSA  flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            未来6个月评估高峰分析预测
          </p>
          <div @click="clone.gffx = true"><chart class="chart" :options="orgOptions.echarts7" :auto-resize="true"></chart></div>
        </div>
        <div class="flexC JustifyContentSA   flex2 category pggffx">
          <div class="flex JustifyContentSA AlignItemsC">
            <p class=" font_28 nav title">
              <span></span>
              评估等级占比图
            </p>
            <ul class="flex font_s16 textC pgdj_ul cursor">
              <li class="tab_a " @click="tabFun(1)" :class="{ tab: tab === 1 }">初评</li>
              <li class="tab_a" @click="tabFun(2)" :class="{ tab: tab === 2 }">复核</li>
              <li class="tab_a" @click="tabFun(3)" :class="{ tab: tab === 3 }">期末</li>
              <li class="tab_a" @click="tabFun(4)" :class="{ tab: tab === 4 }">状态</li>
            </ul>
          </div>
          <div class="flex JustifyContentSA" v-if="tab === 1 || tab === 2 || tab === 3 || tab === 4">
            <chart id="echarts" ref="chart2" :options="orgOptions.echarts1" :auto-resize="true"></chart>
            <ul class="flexC JustifyContentSA colorF font_s22 tab_main textC">
              <li class="flexC" style=" position: absolute; top: 43%; left: 53%;">
                <span style="width: 0.7rem; height: 0.7rem;margin: 0.8rem; border-radius: 50%; background: #59f9fa;"></span>
                <span style="width: 0.7rem; height: 0.7rem;margin: 0.8rem; border-radius: 50%; background: #00a0e9;"></span>
                <span style="width: 0.7rem; height: 0.7rem;margin: 0.8rem; border-radius: 50%; background: #3ac425;"></span>
                <span style="width: 0.7rem; height: 0.7rem;margin: 0.8rem; border-radius: 50%; background: #e6b603;"></span>
                <span style="width: 0.7rem; height: 0.7rem;margin: 0.8rem; border-radius: 50%; background: #dc5858;"></span>
              </li>
              <li class="flex JustifyContentSA AlignItemsC" style="width:14.875rem;height:2.75rem;border:1px solid rgba(0,160,233,1);">
                <p class="flex2">护理等级</p>
                <p class="flex1">占比
                </p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p class="flex1">0-1级</p>
                <p class="flex1 textR">{{ this.oneGradePie }}&nbsp;&nbsp;</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p class="flex1">2-3级</p>
                <p class="flex1 textR">{{ this.twoGradePie }}&nbsp;&nbsp;</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p class="flex1">4级&nbsp;&nbsp;&nbsp;</p>
                <p class="flex1 textR">{{ this.threeGradePie }}&nbsp;&nbsp;</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p class="flex1">5-6级</p>
                <p class="flex1 textR">{{ this.fourGradePie }}&nbsp;&nbsp;</p>
              </li>
              <li class="flex JustifyContentSA AlignItemsC">
                <p class="flex1">7级&nbsp;&nbsp;&nbsp;</p>
                <p class="flex1 textR">{{ this.fiveGradePie }}&nbsp;&nbsp;</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="flex ">
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            各街镇受理评估统计
          </p>
          <div @click="clone.jzt = true"><chart class="chart" :options="orgOptions.echarts8" :auto-resize="true"></chart></div>
        </div>
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            居家享受人数趋势图
          </p>
          <div @click="clone.xsrs = true"><chart class="chart" :options="orgOptions.echarts9" :auto-resize="true"></chart></div>
        </div>
        <div class="flexC   flex2 category pggffx">
          <p class=" font_28 nav title">
            <span></span>
            失能率统计图
          </p>
          <div @click="clone.jieDuanSN = true"><chart class="chart" :options="orgOptions.echarts10" :auto-resize="true"></chart></div>
        </div>
      </div>
    </div>
    <YiBaoPolygon v-if="clone.lchl" @hidden="hiddenClone(0)"><ClinicalNurse :nursingType="this.nursingType"></ClinicalNurse></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.shhl" @hidden="hiddenClone(1)"><LifeNursing :nursingType="this.nursingType"></LifeNursing></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.gffx" @hidden="hiddenClone(2)"><PeakAnalysis></PeakAnalysis></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.jzt" @hidden="hiddenClone(3)"><StreetTown></StreetTown></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.xsrs" @hidden="hiddenClone(4)"><LivingEnjoyment></LivingEnjoyment></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.jieDuanSN" @hidden="hiddenClone(5)"><StageDisabilityRate></StageDisabilityRate></YiBaoPolygon>
  </div>
</template>

<script>
import YiBaoPolygon from '@/components/YiBaoPolygon'
import ClinicalNurse from './ClinicalNurse'
import LifeNursing from './LifeNursing'
import PeakAnalysis from './PeakAnalysis'
import StreetTown from './StreetTown'
import LivingEnjoyment from './LivingEnjoyment'
import StageDisabilityRate from './StageDisabilityRate'
export default {
  name: 'FxEcharts',
  components: { LivingEnjoyment, StreetTown, PeakAnalysis, LifeNursing, ClinicalNurse, YiBaoPolygon, StageDisabilityRate },
  data () {
    return {
      tab: 1,
      cur: 1,
      isActive: 0,
      orgOptions: { echarts1: {}, echarts5: {}, echarts6: {}, echarts7: {}, echarts8: {}, echarts9: {}, echarts10: {} },
      clone: {
        lchl: false,
        shhl: false,
        gffx: false,
        jzt: false,
        xsrs: false,
        jieDuanSN: false
      },
      nursingType: 0,
      /* 评估类型 */
      assessType: 0,
      hlx: [],
      xqsl: [],
      lifeCareTitle: [],
      lifeCareValue: [],
      analyticalPredictionTitle: [],
      analyticalPredictionValue: [],
      jdTitle: [],
      ljslrsValue: [],
      ljpgrsValue: [],
      ljxsrsValue: [],
      assessGradeTitle: [],
      firstAssessValue: [],
      fhAssessValue: [],
      qmAssessValue: [],
      ztAssessValue: [],
      oneGrade: 0,
      twoGrade: 0,
      threeGrade: 0,
      fourGrade: 0,
      fiveGrade: 0,
      oneGradePie: 0,
      twoGradePie: 0,
      threeGradePie: 0,
      fourGradePie: 0,
      fiveGradePie: 0,
      assessGradeList: [],
      // 居家享受人数
      jujiaTitleList: [],
      jujiaValueList: [],
      // 失能率统计
      snl_tjny: [],
      snl_qingdu: [],
      snl_zhong: [],
      snl_zhongdu: []
    }
  },
  methods: {
    tabFun (index) {
      this.tab = index
      if (index === 1) {
        this.assessType = 0
        this.AssessGradeHandle()
      } else if (index === 2) {
        this.assessType = 1
        this.AssessGradeHandle()
      } else if (index === 3) {
        this.assessType = 2
        this.AssessGradeHandle()
      } else if (index === 4) {
        this.assessType = 3
        this.AssessGradeHandle()
      }
    },
    curFun (index) {
      this.cur = index
      if (index === 1) {
        this.nursingType = 0
        this.GeriatricNursingHandle()
      } else if (index === 2) {
        this.nursingType = 1
        this.GeriatricNursingHandle()
      }
    },
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.lchl = false
      } else if (index === 1) {
        this.clone.shhl = false
      } else if (index === 2) {
        this.clone.gffx = false
      } else if (index === 3) {
        this.clone.jzt = false
      } else if (index === 4) {
        this.clone.xsrs = false
      } else if (index === 5) {
        this.clone.jieDuanSN = false
      }
    },
    GeriatricNursingHandle () {
      this.$http.post(this.$api.GeriatricNursing.geriatricNursing, 'hllx=' + this.nursingType, true).then(result => {
        let arr = result.data.result
        for (const hlxlist of arr.values()) {
          this.hlx.push(hlxlist.hlx)
          this.xqsl.push(hlxlist.xqsl)
        }
        if (this.nursingType === 0) {
          this.lifeCareTitle = []
          this.lifeCareValue = []
          for (const hlxlist of arr.values()) {
            this.hlx.push(hlxlist.hlx)
            this.xqsl.push(hlxlist.xqsl)
          }
          this.GeriatricNursingFun(this.hlx, this.xqsl)
        } else if (this.nursingType === 1) {
          this.hlx = []
          this.xqsl = []
          for (const hlxlist2 of arr.values()) {
            this.lifeCareTitle.push(hlxlist2.hlx)
            this.lifeCareValue.push(hlxlist2.xqsl)
          }
          this.LifeCareFun(this.lifeCareTitle, this.lifeCareValue)
        }
      })
    },
    AnalyticalPredictionHandle () {
      this.$http.post(this.$api.AnalyticalPrediction.analyticalPrediction, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.analyticalPredictionTitle.push(value.yf)
          this.analyticalPredictionValue.push(value.sl)
        }
        this.AnalyticalPredictionFun(this.analyticalPredictionTitle, this.analyticalPredictionValue)
      })
    },
    AssessGradeHandle () {
      this.$http.post(this.$api.AssessGrade.assessGrade, 'pglx=' + this.assessType, true).then(result => {
        let arr = result.data.result
        this.assessGradeList = result.data.result
        this.oneGrade = arr[0].sl
        this.twoGrade = arr[1].sl
        this.threeGrade = arr[2].sl
        this.fourGrade = arr[3].sl
        this.fiveGrade = arr[4].sl

        this.oneGradePie = arr[0].zb
        this.twoGradePie = arr[1].zb
        this.threeGradePie = arr[2].zb
        this.fourGradePie = arr[3].zb
        this.fiveGradePie = arr[4].zb

        this.AssessGradeFun(this.oneGrade, this.twoGrade, this.threeGrade, this.fourGrade, this.fiveGrade)
      })
    },
    HomeLiveTrendHandle () {
      this.$http.post(this.$api.HomeLiveTrend.homeLiveTrend, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.jujiaTitleList.push(value.tjny)
          this.jujiaValueList.push(value.xsrs)
        }
        this.jujiaFun(this.jujiaTitleList, this.jujiaValueList)
      })
    },
    JdsjHandle () {
      this.$http.post(this.$api.Jdsj.jdsj, ' ', true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.jdTitle.push(value.jdMc)
          this.ljslrsValue.push(value.ljslrs)
          this.ljpgrsValue.push(value.ljpgrs)
          this.ljxsrsValue.push(value.ljxsrs)
        }
        this.JdsjFun(this.jdTitle, this.ljslrsValue, this.ljpgrsValue, this.ljxsrsValue)
      })
    },
    // 失能率请求数据
    snlGetData () {
      this.$http.get(this.$api.SNLTJ.snltj, true).then(result => {
        let arr = result.data.result
        for (const value of arr.values()) {
          this.snl_tjny.push(value.tjny)
          this.snl_qingdu.push(value.qdsnl)
          this.snl_zhong.push(value.zdsnl)
          this.snl_zhongdu.push(value.zzsnl)
        }
        this.stageRateFun(this.snl_tjny, this.snl_qingdu, this.snl_zhong, this.snl_zhongdu)
      })
    },
    GeriatricNursingFun (arrX, arrY) {
      this.orgOptions.echarts5 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              alignWithLabel: true,
              interval: 0,
              rotate: 40,
              textStyle: {
                color: '#ffffff' // 坐标字体颜色
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff' // x坐标轴颜色
              }
            },
            data: arrX
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              // 坐标轴线条相关设置(颜色等)
              lineStyle: {
                color: '#60707F' // y轴颜色
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#60707F'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#60707F' // 分隔线颜色设置
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '15',
            markPoint: {
              data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
            },
            data: arrY
          }
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 10, // 表示滚动条的高度，也就是粗细
          start: 20, // 表示默认展示20%～80%这一段。
          end: 80
        }
      }
    },
    LifeCareFun (arrX, arrY) {
      this.orgOptions.echarts6 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              alignWithLabel: true,
              interval: 0,
              rotate: 30,
              textStyle: {
                color: '#ffffff' // 坐标字体颜色

              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff' // x坐标轴颜色
              }
            },
            data: arrX
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              // 坐标轴线条相关设置(颜色等)
              lineStyle: {
                color: '#60707F' // y轴颜色
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#60707F'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#60707F' // 分隔线颜色设置
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '10',
            markPoint: {
              data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
            },
            data: arrY
          }
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 10, // 表示滚动条的高度，也就是粗细
          start: 10, // 表示默认展示20%～80%这一段。
          end: 80
        }
      }
    },
    AnalyticalPredictionFun (arrX, arrY) {
      this.orgOptions.echarts7 = {
        tooltip: {
          // 提示框
          trigger: 'axis', // 触发类型
          axisPointer: {
            // 坐标轴指示器配置项
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff' // 坐标字体颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff' // x坐标轴颜色
            }
          },
          data: arrX
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#60707F' // y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#60707F'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#60707F'
            }
          }
        },
        series: [
          {
            data: arrY,
            type: 'line',
            symbol: 'circle', // 标记的图形
            symbolSize: 6, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '59F9FA', // 边框颜色
                color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#59F9FA' // 折线的颜色
                }
              }
            },
            areaStyle: {
              normal: {
                type: 'default',
                color: '#32699E'
              }
            }
          }
        ]
      }
    },
    // 各街镇受理评估统计
    JdsjFun (arrX, arrY, arrY2, arrY3) {
      this.orgOptions.echarts8 = {
        title: {
          text: '',
          textStyle: {
            color: '#fff',
            fontSize: 16
          },
          top: '3%',
          left: '5%'
        },
        grid: {
          left: '4%',
          right: '6%',
          top: '10%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          axisLabel: {
            show: true,
            rotate: 50,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 16
            }
          },
          itemStyle: {
            normal: {
              color: '#59f9fa'
            }
          },
          data: arrX
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#60707F' // y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#60707F'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#60707F'
            }
          }
        },
        series: [
          {
            name: '累计受理人数',
            type: 'bar',
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            itemStyle: {
              normal: {
                color: '#72f6f8',
                fontSize: 14
              }
            },
            data: arrY
          },
          {
            name: '累计评估人数',
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#2981d3',
                fontSize: 14
              }
            },
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            data: arrY2
          },
          {
            name: '累计享受人数',
            type: 'bar',
            stack: '',
            label: {
              normal: {
                show: false,
                position: 'insideRight'
              }
            },
            itemStyle: {
              normal: {
                color: '#ffc24b',
                fontSize: 14
              }
            },
            data: arrY3
          }
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 10, // 表示滚动条的高度，也就是粗细
          start: 10, // 表示默认展示20%～80%这一段。
          end: 80
        }
      }
    },
    // 评估等级占比
    AssessGradeFun (one, two, three, four, five) {
      this.orgOptions.echarts1 = {
        color: ['#59f9fa', '#00a0e9', '#3ac425', '#e6b603', '#dc5858'],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          textStyle: {
            fontSize: '14'
          },
          padding: 10,
          confine: true
        },
        series: [
          {
            type: 'pie',
            hoverAnimation: true,
            radius: ['15%', '85%'],
            avoidLabelOverlap: false,
            data: [{ name: '0-1级', value: one }, { name: '2-3级', value: two }, { name: '4级', value: three }, { name: '5-6级', value: four }, { name: '7级', value: five }],
            label: {
              normal: {
                show: true,
                position: 'inner',
                formatter: function (params) {
                  if (parseInt(params.percent) === 0) {
                    return ''
                  } else {
                    return parseInt(params.percent) + '%'
                  }
                },
                textStyle: {
                  fontSize: '14'
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    //  居家享受人数趋势图
    jujiaFun (arrX, arrY) {
      this.orgOptions.echarts9 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '6%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: arrX,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#00FFFF'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 14
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 14
              }
            },
            axisLine: {
              lineStyle: {
                color: '#00FFFF'
              }
            },
            itemStyle: {
              normal: {
                color: '#f5a142'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '15',
            itemStyle: {
              normal: {
                color: '#f5a142',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white',
                    fontSize: 12
                  }
                }
              }
            },
            data: arrY
          }
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 10, // 表示滚动条的高度，也就是粗细
          start: 10, // 表示默认展示20%～80%这一段。
          end: 80
        }
      }
    },
    // 阶段失能率统计图
    stageRateFun (arrX, arrY1, arrY2, arrY3) {
      this.orgOptions.echarts10 = {
        title: {},
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: ['浦东', '宝山', '崇明', '奉贤', '虹口', '黄浦', '嘉定', '金山', '静安', '闵行', '普陀', '青浦', '松江', '徐汇', '杨浦', '长宁'],
          data: arrX,
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff', // 坐标字体颜色
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: '#00FFFF'
            }
          },
          itemStyle: {
            normal: {
              color: '#f5a142'
            }
          }
        },
        series: [
          {
            name: '轻度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '3ac425', // 边框颜色
                color: '#3ac425', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#3ac425' // 折线的颜色
                }
              }
            },
            // data: [ 2.3, 1.7, 3.3, 2.8, 2.6, 2.1, 2.0, 7.5, 3.5, 2.3, 3.0, 14.0, 2.2, 3.0, 2.7, 3.0 ]
            data: arrY1
          },
          {
            name: '中度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '59F9FA', // 边框颜色
                color: '#59F9FA', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#59F9FA' // 折线的颜色
                }
              }
            },
            // data: [5.3, 4.8, 9.2, 7.0, 10.1, 7.0, 6.7, 11.2, 8.6, 6.7, 8.6, 22.6, 4.6, 7.5, 8.6, 8.7]
            data: arrY2
          },
          {
            name: '重度失能率（%）',
            type: 'line',
            symbolSize: 5, // 拐点的大小
            itemStyle: {
              normal: {
                borderColor: '00a0e9', // 边框颜色
                color: '#00a0e9', // 折线上标记点的颜色 和 图例的颜色
                lineStyle: {
                  width: 1,
                  color: '#00a0e9' // 折线的颜色
                }
              }
            },
            // data: [1.8, 2.0, 4.1, 2.4, 5.4, 3.5, 2.8, 2.4, 3.2, 3.0, 3.9, 4.7, 1.5, 2.7, 4.1, 3.6]
            data: arrY3
          }
        ]
      }
    }
  },
  mounted () {
    this.GeriatricNursingHandle()
    this.AnalyticalPredictionHandle()
    this.AssessGradeHandle()
    this.HomeLiveTrendHandle()
    this.JdsjHandle()
    this.snlGetData()
    // this.stageRateFun()
  }
}
</script>

<style lang="scss" scoped>
.pggffx {
  position: relative;
  overflow: hidden;
  .chart {
    height: 80%;
    width: 95%;
    position: absolute;
    left: 1rem;
    top: 3rem;
  }
  .pgdjzbt_box {
    top: 3rem;
  }
  .title {
    position: absolute;
    top: 0.2rem;
    left: 0;
  }
  .pgdj_ul {
    position: absolute;
    right: 1rem;
    top: 1rem;
  }
}

.FxEcharts {
  .category {
    width: 36rem;
    height: 24.125rem;
    background: rgba(24, 35, 60, 0.6);
    margin: 1rem;
    #echarts {
      width: 15rem;
      height: 15rem;
    }
    .nav {
      font-weight: 400;
      color: rgba(89, 249, 250, 1);
      line-height: 3rem;
      span {
        display: inline-block;
        width: 0.5rem;
        height: 1.75rem;
        background: rgba(89, 249, 250, 1);
        margin-left: 1.5rem;
      }
    }
    .tab_a {
      height: 1.75rem;
      color: #ffffff;
      padding: 0 0.5rem;
      line-height: 1.75rem;
      font-weight: bold;
      border: 1px solid rgba(89, 249, 250, 1);
    }
    .tab,
    .cur {
      height: 1.75rem;
      color: #ffffff;
      background: rgba(16, 31, 57, 1);
      border: 1px solid rgba(89, 249, 250, 1);
      background: rgba(89, 249, 250, 1);
    }
    .tab_main {
      font-weight: 400;
    }
  }
}
</style>
